/* 使点击穿透 */
#nprogress {
  pointer-events: none; /* 禁止鼠标事件，使鼠标点击穿透进度条，不影响下层元素的交互 */
}

#nprogress .bar {
  background: rgb(var(--nprogress-color)); /* 进度条颜色，使用CSS变量定义 */

  position: fixed; /* 固定定位，保持在视口顶部 */
  z-index: 1031; /* 高层级，确保显示在页面内容之上 */
  top: 0; /* 固定在顶部 */
  left: 0; /* 起始位置在左侧 */

  width: 100%; /* 宽度占满整个视口 */
  height: 2px; /* 高度为2像素 */
}

/* 花哨的模糊效果 */
#nprogress .peg {
  display: block; /* 显示为块级元素 */
  position: absolute; /* 绝对定位 */
  right: 0px; /* 固定在右侧 */
  width: 100px; /* 宽度为100像素 */
  height: 100%; /* 高度为父元素的100% */
  box-shadow: /* 添加发光效果 */
    0 0 10px rgb(var(--nprogress-color)),
    0 0 5px rgb(var(--nprogress-color));
  opacity: 1; /* 完全不透明 */

  /* 旋转并平移，创造进度条尾部的特效 */
  -webkit-transform: rotate(3deg) translate(0px, -4px); /* WebKit浏览器前缀 */
  -ms-transform: rotate(3deg) translate(0px, -4px); /* 旧版IE浏览器前缀 */
  transform: rotate(3deg) translate(0px, -4px); /* 标准属性 */
}

/* 删除这些可以去除旋转加载图标 */
#nprogress .spinner {
  display: block; /* 显示为块级元素 */
  position: fixed; /* 固定定位 */
  z-index: 1031; /* 高层级，确保显示在页面内容之上 */
  top: 15px; /* 距顶部15像素 */
  right: 15px; /* 距右侧15像素 */
}

#nprogress .spinner-icon {
  width: 18px; /* 宽度为18像素 */
  height: 18px; /* 高度为18像素 */
  box-sizing: border-box; /* 盒模型设置 */

  border: solid 2px transparent; /* 透明实线边框 */
  border-top-color: rgb(var(--nprogress-color)); /* 上边框使用进度条颜色 */
  border-left-color: rgb(var(--nprogress-color)); /* 左边框使用进度条颜色 */
  border-radius: 50%; /* 圆形边框，创建圆形加载图标 */

  /* 无限旋转动画 */
  -webkit-animation: nprogress-spinner 400ms linear infinite; /* WebKit浏览器前缀 */
  animation: nprogress-spinner 400ms linear infinite; /* 标准属性 */
}

.nprogress-custom-parent {
  overflow: hidden; /* 隐藏溢出内容 */
  position: relative; /* 相对定位，作为定位上下文 */
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute; /* 在自定义父容器中使用绝对定位 */
}

/* 旋转动画定义 */
@-webkit-keyframes nprogress-spinner { /* WebKit浏览器前缀 */
  0% {
    -webkit-transform: rotate(0deg); /* 起始角度0度 */
  }
  100% {
    -webkit-transform: rotate(360deg); /* 结束角度360度，完成一圈旋转 */
  }
}
@keyframes nprogress-spinner { /* 标准属性 */
  0% {
    transform: rotate(0deg); /* 起始角度0度 */
  }
  100% {
    transform: rotate(360deg); /* 结束角度360度，完成一圈旋转 */
  }
}rea {
  font-family: inherit; /* 字体继承 */
  font-feature-settings: inherit; /* 字体特性设置继承 */
  font-variation-settings: inherit; /* 字体变体设置继承 */
  font-size: 100%; /* 设置字体大小为父元素的100% */
  font-weight: inherit; /* 字体粗细继承 */
  line-height: inherit; /* 行高继承 */
  color: inherit; /* 颜色继承 */
  margin: 0; /* 移除外边距 */
  padding: 0; /* 移除内边距 */
}

/* 按钮和选择框样式 */
button, select {
  text-transform: none; /* 移除文本转换 */
}

/* 按钮样式重置 */
button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button; /* 修正iOS和Safari中的样式问题 */
  background-image: none; /* 移除默认按钮样式 */
}

/* Firefox焦点样式 */
:-moz-focusring {
  outline: auto; /* 使用现代Firefox焦点样式 */
}

/* Firefox无效样式 */
:-moz-ui-invalid {
  box-shadow: none; /* 移除Firefox中额外的无效样式 */
}

/* 进度条样式 */
progress {
  vertical-align: baseline; /* 垂直对齐基线 */
}

/* 数字输入框的增减按钮样式 */
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto; /* 修正Safari中光标样式 */
}

/* 搜索框样式 */
[type='search'] {
  -webkit-appearance: textfield; /* 修正Chrome和Safari中的外观 */
  outline-offset: -2px; /* 修正Safari中的轮廓样式 */
}